<template>
  <div>
    <van-toast id="van-toast" />
    <swiper
      class="swiper-image"
      indicator-dots="indicatorDots"
      :autoplay="autoplay"
      :interval="interval"
      :duration="duration"
      indicator-active-color="rgba(255,255,255,.5)"
    >
      <block
        v-for="(item,index) in imgUrls"
        :key="index"
      >
        <swiper-item>
          <image
            :src="item.imgUrl"
            @click="toAd(index)"
            class="slide-image"
            width="355"
            height="150"
          />
        </swiper-item>
      </block>
    </swiper>
    <div class="sort-container">
      <div
        class="item"
        @click="toMoreMusic('uy')"
      >
        <span class="icon">
          <img
            src="../../../static/icons/music.png"
            alt=""
          >
        </span>
        <span class="title">ئۇيغۇرچە</span>
      </div>
      <div
        class="item"
        @click="toMoreMusic('cn')"
      >
        <span class="icon">
          <img
            src="../../../static/icons/cn.png"
            alt=""
          >
        </span>
        <span class="title">خەنزۇچە</span>
      </div>
      <div
        class="item"
        @click="toMoreMusic('er')"
      >
        <span class="icon">
          <img
            src="../../../static/icons/er.png"
            alt=""
          >
        </span>
        <span class="title">چەتئەلچە</span>
      </div>
      <div
        class="item"
        @click="toMoreMusic('cs')"
      >
        <span class="icon">
          <img
            src="../../../static/icons/jita.png"
            alt=""
          >
        </span>
        <span class="title">مۇزىكا</span>
      </div>
    </div>
    <div class="hot-album">
      <div class="title">ئاۋات فىلىملەر</div>
      <div class="content">
        <div
          class="item"
          v-for="(item,index) in videoList"
          :key="index"
          @click="toVideo(item)"
        >
          <img
            :src="item.img_url"
            alt=""
          >
          <div class="title">{{item.name}}</div>
        </div>

      </div>
    </div>
    <div class="hot-song">
      <div class="header">
        <span class="title">ئاۋات ناخشىلار</span>
        <span class="xsj">&#8249;</span>
      </div>
      <ul
        v-for="(item,index) in musicList"
        :key="index"
      >
        <li
          :data-musicurl="item.song_url"
          class="song"
          @tap="getUrl(item)"
        > <span class="iconfont icon-erji1 erji">
          </span>
          <span class="avator">
            <span class="title">{{item.name}} </span>
            <img :src="item.img_url"></img>
          </span>
        </li>
      </ul>
    </div>
    <div
      v-show="playerFlag"
      class="player-show"
    >
      <Player
        @playerFlag="fromChild"
        v-bind:songDetail="songDetail"
      />
    </div>
  </div>
</template>

<script>
import store from "../../utils/store";
// import { request } from "@/utils/index";
import Player from "@/components/Player";
const qcloud = require("wafer2-client-sdk");
import config from "@/utils/config";
export default {
  onShareAppMessage(options) {
    return {
      title: "مارس ناخشا كۇلۇبى",
      path: `/pages/index/main`,
      success: res => {},
      fail: () => {},
      complete: () => {}
    };
  },
  onLoad: function(options) {
    let config = wx.getStorageSync("config");
    this.imgUrls = config.adList.homePage;
    // 页面初始化 options为页面跳转所带来的参数
    /**
     * 监听音乐播放
     */
    wx.onBackgroundAudioPlay(function() {
      // callback
      console.log("onBackgroundAudioPlay");
    });
    /**
     * 监听音乐暂停
     */
    wx.onBackgroundAudioPause(function() {
      // callback
      console.log("onBackgroundAudioPause");
    });
    /**
     * 监听音乐停止
     */
    wx.onBackgroundAudioStop(function() {
      this.playerFlag = false;
      // callback
      console.log("onBackgroundAudioStop");
    });
    /* wx.seekBackgroundAudio({
      position: 30
    }); */
  },
  data() {
    return {
      playerFlag: false,
      videoList: [],
      imgUrls: [
        {
          imgUrl:
            "http://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/1197436.jpg",
          adUrl: "https://www.15v3a.cn"
        },
        {
          imgUrl:
            "http://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/1196887.jpg",
          adUrl: "https://www.15v3a.cn"
        },
        {
          imgUrl:
            "http://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/1197435.jpg",
          adUrl: "https://www.15v3a.cn"
        },
        {
          imgUrl:
            "http://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/1197616.jpg",
          adUrl: "https://www.15v3a.cn"
        }
      ],
      indicatorDots: false,
      autoplay: true,
      interval: 3000,
      duration: 1000,
      musicList: {},
      songDetail: {}
    };
  },

  components: {
    Player
  },

  methods: {
    toAd(id) {
      wx.navigateTo({ url: "/pages/AD/main?from=homePage&id=" + id });
    },
    toMoreMusic(lang) {
      switch (lang) {
        case "uy":
          wx.navigateTo({ url: "/pages/MusicUG/main" });
          break;
        case "cn":
          wx.navigateTo({ url: "/pages/MusicCN/main" });
          break;
        case "er":
          wx.navigateTo({ url: "/pages/MusicFO/main" });
          break;
        case "cs":
          wx.navigateTo({ url: "/pages/MusicCS/main" });
          break;
        default:
          break;
      }
    },
    getUrl(song) {
      store.commit("playMusic", song);
      this.songDetail = song;
      this.playerFlag = true;
      /* wx.playBackgroundAudio({
        dataUrl: song.song_url,
        title: song.name,
        //图片地址地址
        coverImgUrl: song.img_url
      }); */
      this.$http
        .get(`https://wx.15v3a.cn/weapp/Counter?id=${song.id}`)
        .then(res => {
          // console.log(res);
        });
      // this.$http.post(name)
    },
    loginUser() {
      // console.log(config.loginUrl);
      qcloud.setLoginUrl(config.loginUrl);
      qcloud.login({
        success: function(userInfo) {
          console.log("登录成功", userInfo);
          wx.setStorageSync("userInfo", userInfo);
        },
        fail: function(err) {
          console.log("登录失败", err);
        }
      });
    },
    stop() {
      wx.pauseBackgroundAudio();
    },
    over() {
      wx.stopBackgroundAudio();
    },
    fromChild(data) {
      this.playerFlag = data;
    },
    toVideo(item) {
      store.commit("playVideo", item);
      // console.log(item);
      this.$http.get("https://wx.15v3a.cn/weapp/counter?vid=" + item.id);
      wx.navigateTo({ url: `/pages/VideoDetail/main?id=${item.video_url}` });
    }
  },
  onReady() {
    // let app = getApp()
    wx.setNavigationBarTitle({
      title: "ئاۋاز قۇتىسى",
      success: res => {}
    });
    wx.setNavigationBarColor({
      frontColor: "#ffffff", //前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000,
      backgroundColor: "#e75266", //背景颜色值，有效值为十六进制颜色,
      success: res => {}
    });
  },
  beforeMount() {
    this.$http.get("https://wx.15v3a.cn/weapp/config").then(res => {
      this.videoList = res.videoList;
    });

    this.$http.get("https://wx.15v3a.cn/weapp/musicList").then(res => {
      // console.log(res.list);
      let list = res.list,
        len = res.list.length;
      for (let i = 0; i < len; i++) {
        list[i].xuhao = i;
      }
      this.musicList = list;
      store.commit("musicList", list);
    });
  },
  onHide() {
    // console.log(this.globolData);
  },
  onShow() {
    store.commit("musicList", this.musicList);
  }
};
</script>

<style lang="scss" >
@import url("../../../lib/style/iconfont.css");
page {
  width: 100%;
  overflow-x: hidden;
}
.swiper-image {
  // width: 100%;
  height: 300rpx;
  image {
    width: 100%;
    height: 300rpx;
  }
}
.sort-container {
  margin-top: 5rpx;
  width: 100%;
  height: 170rpx;
  // border: 1px solid black;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: row-reverse;
  .item {
    width: 24%;
    height: 92%;
    margin: 0 atuo;
    // border: 1px solid red;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    text-align: center;
    white-space: nowrap;
    .icon {
      width: 80rpx;
      height: 80rpx;
      background-color: #e75266;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 7rpx;
      image {
        width: 50rpx;
        height: 50rpx;
      }
    }
    .title {
      font-size: 30rpx;
      color: #3b3b3b;
    }
  }
}
.hot-album {
  width: 100%;
  // height: 600rpx;
  // border: 1px solid silver;
  background-color: #f6f6f6;
  text-align: right;
  .title {
    // float: right;
    display: inline-block;
    margin-top: 22rpx;
    margin-right: 24rpx;
    color: #929292;
    font-size: 31rpx;
  }
  ::after {
    content: "";
    display: block;
    clear: both;
  }
  .content {
    width: 96%;
    margin-top: 15rpx;
    margin-left: auto;
    margin-right: auto;
    height: 375rpx;
    display: grid;
    padding: 5rpx 10rpx;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto auto;
    grid-gap: 17rpx;
    /*  display: flex;
    justify-content: space-around;
    align-content: space-around;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-items: center; */
    .item {
      border-radius: 20rpx;
      height: 165rpx;
      box-shadow: 0 0 5rpx 2rpx rgba(0, 0, 0, 0.1);
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      overflow: hidden;
      image {
        width: 100%;
        height: 100%;
      }
      .title {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 40rpx;
        background-color: rgba(0, 0, 0, 0.3);
        font-size: 25rpx;
        color: white;
        text-align: center;
        line-height: 40rpx;
        font-family: "Alp Ekran", Cambria, Cochin, Georgia, Times,
          "Times New Roman", serif, Arial, Helvetica, sans-serif !important;
      }
    }
  }
}
.hot-song {
  width: 100%;
  height: 400rpx;
  // border: 1px solid tomato;
  .header {
    // border: 1px solid red;
    width: 100%;
    height: 50rpx;
    line-height: 50rpx;
    margin-top: 10rpx;
    .xsj {
      float: left;
      // margin-top:  7rpx;
      margin-left: 20rpx;
      color: #929292;
      font-size: 51rpx;
    }
    .title {
      float: right;
      // margin-top: 22rpx;
      margin-right: 24rpx;
      color: #929292;
      font-size: 31rpx;
    }
    ::after {
      content: "";
      display: "block";
      clear: both;
    }
  }
  .song {
    margin-top: 20rpx;
    width: 100%;
    height: 60rpx;
    // border: 1px solid slateblue;
    .erji {
      float: left;
      font-size: 40rpx;
      line-height: 60rpx;
      color: #999999;
      margin-left: 20rpx;
    }
    .avator {
      float: right;
      display: flex;
      justify-content: center;
      align-items: center;
      image {
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        margin-right: 20rpx;
      }
      .title {
        font-size: 30rpx;
        color: #929292;
        margin-right: 20rpx;
      }
    }
  }
  .song::after {
    content: "";
    display: block;
    clear: both;
  }
}
</style>

